
<template>
	<div>
		<van-nav-bar title="购物车" />
		<div v-if="data.length" id="shopcart">
			<div style="width: 100%; height: 100%; background: #F7F7F7; margin-bottom:1.333333rem">
				<div class="shoppingCart" v-for="item in data" :key="item.id">
					<div style="width: 100%; border: 0px solid black;">
						<div class="border"></div>
						<div>
							<van-row>
								<van-col span="2">
									<van-checkbox id="check" v-model="item.statu" style="line-height: 110px;" checked-color="#ff5733"></van-checkbox>
								</van-col>
								<van-col span="6">
									<img :src="item.img" class="goodsimg" @click="onIndex"/>
								</van-col>
								<van-col span="16">
									<span class="goodsname">{{item.goodsname}}</span>
									<span class="goodstype">{{item.goodstype}}</span>
									<div style="display: flex; justify-content: space-between; margin-bottom: .266667rem;">
										<span class="goodsprice">¥{{item.goodsprice}}</span>
										<van-stepper class="num" v-model="item.value" :disable-input="true" />
									</div>
									<div class="item-edit-btn" @click.prevent="remove(item)">
										<van-icon name="delete" size="25px" />
									</div>
								</van-col>
							</van-row>
						</div>
					</div>
				</div>
				<div :class="data.length>=3==true?'length':'lengtha'"></div>
			</div>
		</div>
		<div v-else class="toShop">
			购物车是空的，先去逛逛吧~
		</div>
		<van-submit-bar :price="totalPrice*100" button-text="提交订单" @submit="onSubmit" style="margin-bottom: 1.33333rem;">
			<van-checkbox style="margin-left: 10px;" v-model="checked" checked-color="#ff5733">全选</van-checkbox>
		</van-submit-bar>
		<bottom/>
	</div>
</template>
 
<script>
	const data = [{
			id: 1001,
			statu: false,
			value: 1,
			img: '../../../static/img/goodsdemo.jpg',
			goodsname: '商品名称',
			goodstype: '选择的尺码',
            goodsprice: 699.00
        },
        {
			id: 1002,
			statu: false,
			value: 1,
			img: '../../../static/img/goodsdemo.jpg',
			goodsname: '商品名称',
			goodstype: '选择的尺码',
			goodsprice: 699.00
        },
        {
			id: 1003,
			statu: false,
			value: 1,
			img: '../../../static/img/goodsdemo.jpg',
			goodsname: '商品名称',
			goodstype: '选择的尺码',
			goodsprice: 699.00
        },
        {
			id: 1004,
			statu: false,
			value: 1,
			img: '../../../static/img/goodsdemo.jpg',
			goodsname: '商品名称',
			goodstype: '选择的尺码',
			goodsprice: 699.00
        }
	]
	
	export default {
		name:'shoppingCart',
		data() {
			return {
				value: 12,
				checked: false,
				data: data,
                total: 0,
                allSelectedGoods: []
			};
		},
		mounted(){
			// console.log(data.length>=3)
		},
		computed: { 
			totalPrice() {//计算购物车金额
				var total = 0;
				for(var i = 0; i < this.data.length; i++) {
					if(this.data[i].statu==true){
						total += this.data[i].goodsprice * this.data[i].value
					}
				}
				return total
			},
			
		},
		methods: {
			onIndex (){
				this.$router.push({ path: 'commoditypage' })
			},
			onSubmit() {
				this.$router.push({ path: 'paying' })
			},
			remove(item){
				let index = this.data.findIndex(list => {
					return list.id == item.id;
				})
				this.data.splice(index,1);
			}
		},
		watch:{
			checked(val){
				if(val==true){
					for(var i=0;i<this.data.length;i++){
						this.data[i].statu=true
					}
				}else{
					for(var i=0;i<this.data.length;i++){
						this.data[i].statu=false
					}
				}
			}
		}
	};
</script>
 
<style>
/*头部样式*/
#shopcart{
    margin-top: 1.226667rem;
}
.van-nav-bar {
    background-color: #ff6341;
	position: fixed;
    width: 100%;
    height: 1.226667rem;
    top: 0;
    left: 0;
}
.van-nav-bar .van-icon {
    color: white;
}
.van-nav-bar__title {
    color: white;
}
.van-stepper__input[disabled] {
    color: black;
}

.shoppingCart {
    display: flex;
    width: 94%;
    height: 4rem;
    background: #FFFFFF;
    margin-left: 3%;
    border-radius: 4px;
}
#check{
    margin-top: 1.466667rem;
    margin-left: .133333rem;
}
.border {
    margin-top: .133333rem;
    height: 2px;
    background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
    background-size: 2.666667rem;
    margin-bottom: .133333rem;
}
.num{
    margin-right: .266667rem;
}

.goodsimg {
    display: flex;
    width: 100%;
    height: 100%;
}

.goodsname {
    display: flex;
    font-size: 14px;
    text-align: left;
    margin-top: .4rem;
    margin-bottom: .4rem;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-align: left;
}

.goodtype {
    display: flex;
    font-size: 12px;
    text-align: left;
    margin-bottom: .266667rem;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-align: left;
}

.goodsprice {
    display: flex;
    font-size: 16px;
    margin-top: 10px;
    text-align: left;
    font-weight: bold;
    color: #ff5733;
}
.item-edit-btn{
    margin-left: 4.8rem;
}
.lengtha{
    height: 70vh;
}
.length{
    height: 10vh;
}
@media only screen and (min-width: 768px) and(max-width:1024px) {
    .goodsimg {
        display: flex;
        width: 130px;
        height: 110px;
    }
}
.toShop{
    font-size: .533333rem;
    margin-top: 4rem;
    margin-left: 1.066667rem;
}
</style>

